<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2023/10/7
  Time: 11:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>店铺信息</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
<div id="app">
    <%--  搜索框--%>
    <el-form :inline="true" :model="branchForm" class="demo-form-inline">
        <el-form-item label="">
            <el-input v-model="branchForm.branchname" placeholder="请输入店铺名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="query">查询</el-button>
            <el-button type="primary" @click="insertVisible=true">新增</el-button>
        </el-form-item>
    </el-form>

    <%-- 新增部门信息框--%>
    <el-dialog
            title="新增门店信息"
            :visible.sync="insertVisible"
            width="40%">
        <el-form ref="form" :model="insertForm" label-width="80px">
            <el-form-item label="门店编号">
                <el-input v-model="insertForm.branchid" placeholder="请输入门店编号"></el-input>
            </el-form-item>
            <el-form-item label="门店名">
                <el-input v-model="insertForm.branchname" placeholder="门店名"></el-input>
            </el-form-item>
            <el-form-item label="开店日期">
                <el-date-picker type="date"
                                value-format="yyyy-MM-dd hh:mm:ss"
                                placeholder="选择日期" v-model="insertForm.starttime"
                                style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="门店地址">
                <el-input v-model="insertForm.address" placeholder="请输入门店地址"></el-input>
            </el-form-item>
            <el-form-item label="分配店长">
                <el-select v-model="insertForm.staffid" placeholder="--请选择--">
                    <el-option v-for="s in staffnames" :label="s.staffname"
                               :value="s.staffid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态选择">
                <el-select v-model="insertForm.state" placeholder="--请选择--">
                    <el-option label="营业" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="insertConfirm">确 定</el-button>
    <el-button @click="insertForm={}">重 置</el-button>

  </span>
    </el-dialog>


    <%--  表格内容--%>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号">
        </el-table-column>
        <el-table-column
                prop="branchid"
                label="门店编号">
        </el-table-column>
        <el-table-column
                prop="branchname"
                label="门店名"
                width="110">
        </el-table-column>
        <el-table-column
                prop="starttime"
                label="开店时间"
                width="130">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="110">
        </el-table-column>
        <el-table-column
                prop="staffname"
                label="店长">

        </el-table-column>
        <el-table-column
                prop="count"
                label="本店人数"
                width="100">

            <template slot-scope="scope">
                <template v-if="scope.row.count == null">
                    0
                </template>
                <template v-if="scope.row.count !== null">
                    {{ scope.row.count}}
                </template>
            </template>

        </el-table-column>
        <el-table-column

                prop="status"
                label="状态">
            <template slot-scope="scope">
                <el-tag
                        v-if="scope.row.state === 1"
                        type="success"
                        disable-transitions>营业
                </el-tag>
                <el-tag
                        v-else="scope.row.state === 0"
                        type="info"
                        disable-transitions>整顿
                </el-tag>
            </template>
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"
                width="400">
            <template slot-scope="scope">
                <div v-if="scope.row.branchid=='12138'" style="text-align: center;color: red">
                    总店
                </div>
                <div v-else>
                    <el-button
                            size="small"
                            type="success"
                            @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button @click="roleDel1(scope.row)" type="primary"
                               size="small">更换店长
                    </el-button>
                    <el-button @click="roleDel2(scope.row)" type="primary"
                               size="small">店长调离
                    </el-button>
                    <%--                <el-button @click="roleDel(scope.row)" type="danger" icon="el-icon-delete" circle--%>
                    <%--                           size="small"></el-button>--%>
                    <el-button type="warning" @click="roleEditor(scope.row)" size="small">整顿<%-- 整顿--%>
                    </el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>

    <%--分页组件--%>
    <el-pagination
    <%-- 改变每页显示的记录条数的函数 --%>
            @size-change="handleSizeChange"
    <%--改变页码触发的函数--%>
            @current-change="handleCurrentChange"
    <%--当前页数--%>
            :current-page="currentPage"
    <%--页面大小的下拉框--%>
            :page-sizes="[1,5,10]"
    <%--默认每页显示的条数--%>
            :page-size="pageSize"
    <%--组件布局--%>
            layout="total, sizes, prev, pager, next, jumper"
    <%--总条数--%>
            :total="total">
    </el-pagination>


    <%--  编辑按钮弹出框--%>
    <el-dialog
            title="编辑门店信息"
            :visible.sync="editVisible"
            width="40%">
        <el-form ref="form" :model="editForm" label-width="80px">
            <el-form-item label="门店编号">
                <el-input v-model="editForm.branchid" placeholder="请输入门店编号" readonly></el-input>
            </el-form-item>
            <el-form-item label="门店名">
                <el-input v-model="editForm.branchname" placeholder="门店名"></el-input>
            </el-form-item>
            <el-form-item label="开店日期" readonly>
                <el-date-picker type="date"
                                placeholder="选择日期" v-model="editForm.starttime"
                                style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="门店地址">
                <el-input v-model="editForm.address" placeholder="请输入门店地址"></el-input>
            </el-form-item>
            <el-form-item label="原店长id" readonly>
                <el-input v-model="editForm.id" placeholder="请输入门店地址" readonly></el-input>
            </el-form-item>
            <el-form-item label="原店长" readonly>
                <el-input v-model="editForm.staffname" placeholder="请输入门店地址" readonly></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="editConfirm">确 定</el-button>
    <el-button @click="editForm={}">重 置</el-button>

  </span>
    </el-dialog>





        <%--  店长调离--%>
        <el-dialog
                title="编辑门店信息"
                :visible.sync="up1"
                width="40%">
            <el-form ref="form" :model="upstaff" label-width="80px">


                <el-form-item label="工号">
                    <el-input v-model="upstaff.id"  readonly></el-input>
                </el-form-item>
                <el-form-item label="名字">
                    <el-input v-model="upstaff.staffname"  readonly></el-input>
                </el-form-item>
                <el-form-item label="门店名称">
                    <el-input v-model="upstaff.branchname" readonly></el-input>
                </el-form-item>
                <el-form-item label="部门名称">
                    <el-input v-model="upstaff.deptname" readonly></el-input>
                </el-form-item>
                <el-form-item label="新门店">
                    <el-select v-model="upstaff.branchid1" placeholder="--门店--">
                        <el-option v-for="item in branchs"  :key="item.branchid" :label="item.branchname"
                                   :value="item.branchid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="新部门">
                    <el-select v-model="upstaff.roleid1" placeholder="--门店--">
                        <el-option v-for="ite in role"  :key="ite.roleid" :label="ite.rolename"
                                   :value="ite.roleid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="up2">确 定</el-button>
    <el-button @click="upstaff={}">重 置</el-button>
  </span>
        </el-dialog>



        <%--  店长--%>
        <el-dialog
                title="修改店长信息"
                :visible.sync="up4"
                width="40%">
            <el-form ref="form" :model="newstaff" label-width="80px">

                <el-form-item label="门店名称">
                    <el-input v-model="newstaff.branchname" placeholder="请输入门店地址" readonly></el-input>
                </el-form-item>
                <el-form-item label="分配店长">
                    <el-select v-model="newstaff.staffid" placeholder="--请选择--">
                        <el-option v-for="s in staffnames" :label="s.staffname"
                                   :value="s.staffid"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="up3">确 定</el-button>
    <el-button @click="newstaff={}">重 置</el-button>
  </span>
        </el-dialog>

</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            dis: false,
            //表格内容
            tableData: [],
            //当前页面
            currentPage: 1,
            //每条默认条数
            pageSize: 10,
            //总条数
            total: 0,
            //搜索的店铺对象
            branchForm: {},
            //控制添加对话框的显示与隐藏
            insertVisible: false,
            //添加表单对象
            insertForm: {},
            //修改表单对象
            editForm: {},
            //控制修改对话框的显示与隐藏
            editVisible: false,
            branchs:[],
            deptmentData:[],
            role:[],
            //获取可选的店长
            staffs:[],
            //弹出层隐藏
            up4:false,
            //弹出层数组
            newstaff:{},

        //     调离弹出框
            up1:false,
        //     调离对象
            upstaff:{deptname:''},
            staffnames:[],
        },
        created() {
            this.inittable();
            this.initTable1()
        },
        methods: {
            inittable() {
                let self = this;
                axios.post("/brand/store?currentPage=" + this.currentPage + '&pageSize=' + this.pageSize,this.branchForm).then(function (resp) {
                    self.tableData = resp.data.rows
                    self.total = resp.data.total
                })
            },
            // 改变也页面大小//
            handleSizeChange(val) {
                this.pageSize = val;
                this.inittable();
            },
            // 改变显示页码 //
            handleCurrentChange(val) {
                this.currentPage = val;
                this.inittable();
            },
            // 点击查询按钮方法 //
            query() {
                this.inittable();
            },
            // 点击新增按钮方法//
            insertConfirm() {
                console.log(this.insertForm)
                axios.post("/brand/insert", this.insertForm).then(function (resp) {
                        //提示信息
                        app.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        app.insertVisible=false;
                        //重新刷新页面
                        app.inittable();

                })
            },
            // 点击修改按钮方法//
            handleEdit(row) {
                this.editVisible = true;
                this.editForm = row;
            },
            // 点击修改确认方法 //
            editConfirm() {
                axios.post("/brand/update", this.editForm).then(function (resp) {
                    //关闭修改对话框
                    app.editVisible = false;
                    //刷新表格
                    app.inittable();
                    app.$message({
                        message: '编辑成功',
                        type: 'success'
                    });
                    this.inittable();

                })

            },
            initTable1(){
                axios.post("/staff/select1").then(function (resp){
                    app.branchs = resp.data.data
                })
                axios.post("/staff/select2").then(function (resp){
                    app.deptmentData = resp.data.data
                })
                axios.post("/staff/select3").then(function (resp){
                    app.role = resp.data.data
                })
                axios.post("/staff/selectStaff").then(resp=>{
                    console.log(resp)
                    this.staffnames = resp.data.data
                })
            },
            //更换店长
            roleDel1(row) {
                if (row.staffname != null) {
                    app.$message('请先调离店长')
                    return
                }
                app.$message("可以修改店长")
                app.up4=true;
                app.newstaff = row
            },
            //更换店长确认按钮
            up3(){
                console.log(app.newstaff)
                app.up4=false;
                axios.post("/brand/updateAll",this.newstaff).then(function (resp){
                    console.log(resp)
                    app.inittable();
                    app.initTable1();
                })
                app.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            },
            //去调离
            roleDel2(row) {
                this.upstaff=row
                if (this.upstaff.staffname!==null){
                    axios.post("/brand/dept?branchid="+this.upstaff.branchid).then(resp=>{
                        this.upstaff.deptname = resp.data.data
                        this.up1=true;
                    })

                }else {
                    app.$message("暂无店长，无法调离")
                }
                console.log(this.upstaff)
            },
            up2(){
                axios.post("/brand/diao",app.upstaff).then(function (resp) {
                    if (resp.data==2){
                        app.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        app.up1=false;
                        app.inittable();
                    }
                    app.inittable();
                    app.up1=false;


                })
            },

            //点击整顿的方法
            editPermission(row) {
                let self = this;
                //点击整顿

                if (this.editForm.state === 1) {
                    app.$confirm('确定整顿/营业吗？', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.editForm.state = 0;
                        if (this.editForm.state = 0) {
                            //刷新
                            self.inittable();
                            //修改成功
                            self.$message({
                                type: 'success',
                                message: '修改成功'
                            })
                        }
                    }).catch(() => {
                        //取消
                        self.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
                //点击营业
                if (this.editForm.state === 0) {
                    app.$confirm('确定整顿/营业吗?', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.editForm.state = 0;
                        if (this.editForm.state = 0) {
                            //刷新页面
                            self.inittable();
                            //修改成功提示信息
                            self.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        }
                    }).catch(() => {
                        //取消删除提示信息
                        self.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
            },
            /*点击整顿方法*/
            roleEditor(row) {
                let self = this;
                axios.post("/brand/adjust", row).then(function (resp) {
                    self.$confirm('确定营业/整顿吗?', '信息', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(() => {
                        //判断 是整顿还是营业
                        if (row.state === 1) {
                            row.state = 1
                        } else {
                            row.state = 0
                        }
                        if (resp.data === 1) {
                            self.inittable();
                            self.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        }
                    })
                    app.inittable();
                })
            },
        }
    })
</script>
</body>
</html>